<template>
    <div class="productions-content">
        <div class="banner">
            <img src="/images/productions/bc.jpg" alt="">
            <div class="title-l">
                <div class="m-title">天奇制造</div>
                <div class="sub-title">“汽车工艺装备制造”整体解决方案</div>
            </div>
            <div class="title-r">
                <div class="m-title">中国</div>
                <div class="sub-title">智能制造</div>
            </div>

        </div>

        <div class="title"><span>天奇相关产品</span></div>


        <div class="data-list">
            <div class="data-item" v-for="(item, index) in data_list" :key="item.id">
                <img :src="item.pic" alt="">
                <div class="name">{{ item.name }}</div>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';




interface dataTye {
    name: string,
    type?: string,
    pic: string,
    id: number
}



let data_list: dataTye[] = reactive([
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 1 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 2 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 3 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 4 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 5 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 6 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 7 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 8 },
])


</script>

<style scoped lang='scss'>
.productions-content {
    width: 100%;
    box-sizing: border-box;

    .banner {
        width: 100%;
        height: 378px;
        position: relative;
        box-sizing: border-box;
        padding: 130px 18%;
        display: flex;
        justify-content: flex-end;

        .title-l {
            position: relative;
            margin-right: 20px;

            .m-title {
                text-align: right;
                color: #fef001;
                font-size: 44px;
            }

            .sub-title {
                box-sizing: border-box;
                font-size: 24px;
                color: #eade38;
                text-align: right;
            }

            &::after {
                position: absolute;
                content: '';
                width: 1.5px;
                top: 10px;
                right: -10px;
                height: 100px;
                background-color: #fff;
            }
        }

        .title-r {
            color: white;

            .m-title {
                font-size: 44px;
            }

            .sub-title {
                font-size: 24px;
            }
        }



        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    }


    .title {
        width: 100%;
        text-align: center;
        margin: 40px 0 30px 0;

        span {
            border-bottom-style: solid;
            border-bottom-width: 1px;
            box-shadow: #b2b2b2 0px px 1px;
            font-family: Microsoft YaHei;
            font-size: 24px;
            color: #323232;
        }
    }




    .data-list {
        box-sizing: border-box;
        padding-bottom: 30px;
        padding: 0 15%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .data-item {
            width: 24%;
            height: 350px;
            overflow: hidden;
            box-sizing: border-box;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 20px;

            img {
                width: 100%;
                height: 87%;
                transition: all .3s linear;

                &:hover {
                    transform: scale(1.1);
                }
            }


            .name {
                color: #333;
                font-size: 20px;
            }

            .type {
                color: #666;
                font-size: 12px;
            }

            &:last-child {
                margin-right: 0;
            }
        }

        .el-button:hover {
            background-color: #1259E9;
            color: white;
        }

    }

}
</style>